<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>管理员查看所有用户列表</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .header{
      width: 100%;
      margin: auto;
      /* background-color:rgba(0,0,0,0.3) ; */
    }
    .logo img {
      width: 150px;
      margin: 20px 20px 0 20px;
    }
    .tou{
      width: 1000px;
      /* background-color: pink; */
      overflow: hidden;
      margin: auto;
    }
    .tou a {
      text-decoration: none;
      color: black;
      float: left;
      font-size: 20px;
    }
    li{
      width: 130px;
      height: 96px;
      float: left;
      list-style: none;
      padding: 15px;
      margin-top: 20px ;
      box-sizing: border-box;
    }
    .center{
      width: 1000px;
      margin: auto;
      /* background-color: rgba(0,0,0,0.2); */
      text-align: center;
    }
    table{
      margin: auto;
      background-color: rgba(0,0,0,0.1);
      border-radius: 10px;
    }
    .tit{
      background-color:rgba(0,0,0,0.7) ;
      color: #fff;
      height: 40px;
      font-size: 20px;
     
    }
    button{
      border: 0;
    }
    .user>tr:nth-child(2n+1){
      background-color: aquamarine;
    }
  </style>
</head>

<body>
  <div class="bj">
    <div class="header">
    <div class="tou">
      <a href="list.html" class="logo"><img src="./img/logo.png"></a>
      <ul>
        <li>
          <a href="./index.html">首页</a>
        </li>
        <li>
          <a href="./azhang.html">学习计划</a>
        </li>
        <li>
          <a href="./ajie.html">计划内容</a>
        </li>
        <li>
          <a href="./aboke.html">博客</a>
        <li>
          <a href="./ashipin.html">视频</a>
        </li>
        <li>
          <a href="./axiazai.html">下载</a>
        </li>
      </ul>
      <hr>
    </div>
  </div>
    <div class="center">

      <h2>全部用户信息</h2>
      <hr>
      <table align="center" border="1px">
        <thead>
          <tr class="tit">
            <th style="width: 70px;">序号</th>
            <th style="width: 120px;">用户名字</th>
            <th style="width: 150px;">用户手机号</th>
            <th style="width: 70px;">密码</th>
            <th style="width: 80px;">删除</th>
          </tr>
        </thead>
        <tbody id="userlist" class="user"></tbody>
      </table>
    </div>

  </div>


  <script>
    //1.获取元素
    var userlist = document.getElementById('userlist');
    //2.写ajax函数，并且不需要交互调用，页面刷新是直接调用
    function ajax() {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            var result = JSON.parse(xhr.responseText);
            console.log(result);
            //调用显示用的函数showlist
            showlist(result.data);
          } else {
            console.log('数据返回错误');
          }
        }
      }
      xhr.open('GET', '/admin/list', true);
      xhr.send();
    }
    //3.调用ajax函数
    ajax();
    //4.创建用于遍历数据显示的showlist函数
    function showlist(arr) {
      //空字符
      var str = '';
      //遍历
      for (var i = 0; i < arr.length; i++) {
        str += `<tr>
            <td>${arr[i].id}</td>
            <td>${arr[i].username}</td>
            <td>${arr[i].uphone}</td>
            <td>${arr[i].upassword}</td>
            <td><button onclick=del(${arr[i].id})>删除</button></td>
          </tr>`
      }
      // 插入到userlist标签中
      userlist.innerHTML = str;
    }
    //5.删除用户数据的函数(要触发ajax)
    function del(id) {
      // alert(id);
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            var result = JSON.parse(xhr.responseText);
            console.log(result);
            //result.code==1 相当于删除成功了
            if (result.code == 1) {
              alert(result.msg);
              //重新去后台查询所有内容，并刷新页面
              ajax();
            }
          } else {
            console.log('返回数据错误');
          }
        }
      }
      // delete方法和get方法基本一致，传参方式相同
      xhr.open('DELETE', `/admin/del/${id}`, true);
      xhr.send();
    }
  </script>
</body>

</html>